<template>
  <van-swipe @change="onChange">
    <van-swipe-item>
      <div class="map_zone">
        <!-- 地图区域 -->
      </div>
    </van-swipe-item>
    <van-swipe-item>
      <div class="map_zone">
        <!-- 地图区域 -->
      </div>
    </van-swipe-item>
    <van-swipe-item>
      <div class="map_zone">
        <!-- 地图区域 -->
      </div>
    </van-swipe-item>
    <van-swipe-item>
      <div class="map_zone">
        <!-- 地图区域 -->
      </div>
    </van-swipe-item>
    <van-swipe-item>
      <div class="map_zone">
        <!-- 地图区域 -->
      </div>
    </van-swipe-item>
    <van-swipe-item>
      <div class="map_zone">
        <!-- 地图区域 -->
      </div>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
//父组件传过来的 menuname和showunit 用来做标题和单位 
//本身生成一个 dayid 与menucode一同调用接口 根据轮播的change事件来改变传参和地图classu
import {echartsTools} from "@/utils/echartsTool"
import axios from 'axios'
export default {
  name: 'ChartZone',
  data(){
    return {
      //地图参数
      titleArr: [],
      unitArr: [],
      bigNumArr: [],
      mapData: "",
      //轮播计数器
      chartIndex: "0",
    }
  },
  beforeMount (){
    
  },
  mounted(){
    this.getData();
  },
  methods: {
    getData (){//获取地图数据 + 获取大的百分比 + 单位 + 标题
      function getTitleAndUnit(){
        return axios.get('/api/busiKpi.json')
      };
      function getMapData(){
        return axios.get('/api/mapData.json')
      };
      function getBigNum(){
        return axios.get('/api/bigNum.json')
      }
      axios.all([getTitleAndUnit(), getMapData(), getBigNum()])
        .then(axios.spread((res1, res2, res3)=>{
          this.getBusiKpiSucc(res1);
          this.getMapDataSucc(res2);
          this.getBigNumSucc(res3);
          this.drawMap();
        }))
    },
    getBusiKpiSucc (res){
      var eachData = res.data.data;
      // console.log(eachData);
      //将指标名称指标id和单位组成数组传给轮播组件
      for(let x = 0,len = eachData.length; x < len; x++){
        this.titleArr.push(eachData[x].MENU_NAME);
        this.unitArr.push(eachData[x].SHOW_UNIT);
      };
    },
    getMapDataSucc (res){//处理地图数据（排序加上类别）先给首次加载的地图入参附上初始值
      var eachData = res.data.data;
      // console.log(eachData);
      var newItemArr = [];//处理完的地图数据
      for (let x = 0, len = eachData.length; x < len; x++){
        let topArr = eachData[x].splice(0,5),
            bottomArr = eachData[x].splice(21,5),
            middleArr = eachData[x];
        for(let y = 0; y < 5; y++){
          topArr[y].value.push("前五省");
          bottomArr[y].value.push("后五省");
        };
        for( let item of middleArr){
            item.value.push("中间省份");
        };
         newItemArr.push(topArr.concat(middleArr,bottomArr));
      };
      this.mapData = newItemArr;
      // console.log(this.mapData);
    },
    getBigNumSucc (res){
      var eachData = res.data.data;
      for(let x = 0,len = eachData.length; x < len; x++){
        this.bigNumArr.push(eachData[x].bigNum);
      };
    },
    onChange(index) {
      this.chartIndex = index;//改变index之后
      this.drawMap();
    },
    drawMap(){
      echartsTools.map(this.chartIndex,this.titleArr[this.chartIndex],this.bigNumArr[this.chartIndex],this.mapData[this.chartIndex],this.unitArr[this.chartIndex]);
    }
  }
}
</script>

<style>
  .map_zone{
    width: 750px;
    height: 832px;
    background-color: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.17);
  }
</style>